<template>
  <div>
    <div class="custom-mapinfo-right-card custom-mapinfo-right-card-children">
      <div class="cardTop"></div>
      <div class="cardMid">
        <ul>
          <li @click="handleClickMenu($event,0)">
            <div class="liWrapper">
            <span class="right-card-item-icon right-card-item-waterArea"></span>
            <div class="right-card-item-content">
              <span class="h1 dropMenu" :class='curentIndex === 0?"active":""'>水域</span>
              <!-- <span class="p"><b>376</b>个</span> -->
              <div class="dropUl" @click.stop="handleClickStop" :style='{height: heightArr[0]+"px"}'>
                <dl ref="drop_0">
                  <dd>
                    <span class="h1">河流</span>
                    <span class="p"><b>376</b>个</span>
                  </dd>
                  <dd>
                    <span class="h1">水库</span>
                    <span class="p"><b>851</b>个</span>
                  </dd>
                  <dd>
                    <span class="h1">人工基坑</span>
                    <span class="p"><b>12251</b>个</span>
                  </dd>
                  <dd>
                    <span class="h1">水塘</span>
                    <span class="p"><b>32479</b>个</span>
                  </dd>
                </dl>
              </div>
            </div>
            </div>
          </li>
          <li @click="handleClickMenu($event,1)">
            <div class="liWrapper">
              <span class="right-card-item-icon right-card-item-service"></span>
              <div class="right-card-item-content">
                <span class="h1 dropMenu" :class='curentIndex === 1?"active":""'>公共设施</span>
                <div class="dropUl" @click.stop="handleClickStop" :style='{height: heightArr[1]+"px"}'>
                  <dl ref="drop_1">
                    <dd>
                      <span class="h1">公共设施</span>
                      <span class="p"><b>37600</b>个</span>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </li>
          <li @click="handleClickMenu($event,2)">
            <div class="liWrapper">
              <span class="right-card-item-icon right-card-item-videoSurveillance"></span>
              <div class="right-card-item-content">
                <span class="h1 dropMenu" :class='curentIndex === 2?"active":""'>视频监控</span>
                <div class="dropUl dropUls" @click.stop="handleClickStop" :style='{height: heightArr[2]+"px"}'>
                  <dl ref="drop_2">
                    <dd>
                      <span class="h1">视频监控</span>
                      <span class="p"><b>37600</b>个</span>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="cardBot"></div>
    </div>

    <div class="custom-mapinfo-bottom-card">
      <div class="scardTop">
        <div class="searchForm">
          <el-col :span="20">
            <el-input class="keyword" v-model="formData.keyWord" placeholder="请输入搜索内容"> </el-input>
          </el-col>
          <el-col :span="4">
            <el-button class="search_btn" type="primary" >&nbsp;</el-button>
          </el-col>
        </div>
      </div>
      <div class="scardBot">
        <div class="custom-seach-item">
          <ul>
            <li :class="curItem === index?'active':''" v-for='(item, index) in searchItem' :key="index" @click="handleSearchItem(index)">
              <p>{{item.name}}</p>
              <img :src="item.img" />
            </li>
          </ul>
          <dl class="custom-chilren-item">
            <dd v-for="(item, index) in childrenData" :key="index" :class="childrenItem===index?'active ' + item.class:item.class" @click="handleSelectItem(index)">{{item.name}}</dd>
          </dl>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import {getThingsData} from '@/data/applicationData'
export default {
  components: {},
  data () {
    return {
      formData: {},
      curentIndex: 0,
      thingsData: [],
      childrenData: [],
      heightArr: [],
      curItem: '',
      childrenItem: '',
      searchItem: [
        {img: require('@/assets/application/things/sy_b.png'), name: '水域'},
        {img: require('@/assets/application/things/gg_b.png'), name: '公共设施'},
        {img: require('@/assets/application/things/sp_b.png'), name: '视频监控'}
      ]
    }
  },
  mounted () {
    this.ThingsData = getThingsData()
    this.childrenData = this.ThingsData[0]
    let H = this.$refs['drop_0'].offsetHeight
    this.heightArr[0] = H
  },
  watch: {},
  // 方法集合
  methods: {
    search () {
      this.loadData()
      if (this.curItem !== '' && this.selectForm.keyword !== '') {
        this.loadingMast()
      } else {
        this.$message({
          type: 'info',
          message: '请先选择分类并且填写想要搜索的内容！'
        })
      }
    },
    loadingMast () {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    loadData () {
      this.resData = []
      if (this.curItem === 0) {
      }
    },
    handleClickMenu (el, index) {
      if (this.curentIndex === index) {
        this.curentIndex = -1
        this.heightArr[index] = 0
      } else {
        this.curentIndex = index
        let H = this.$refs['drop_' + index].offsetHeight
        this.heightArr = [0, 0, 0]
        this.heightArr[index] = H
      }
    },
    handleSearchItem (index) {
      this.childrenData = this.ThingsData[index]
      this.curItem = index
      this.childrenItem = 0
    },
    handleSelectItem (index) {
      if (this.childrenItem === index) {
        this.childrenItem = ''
      } else {
        this.childrenItem = index
      }
    },
    dialogShow (data) {
      this.getFormData(data, this.curItem)
      this.loadingMast()
    },
    close () {
      this.dialogFormVisible = false
    },
    handleClickStop () {},
    getFormData (data, type) {
      if (type === 0) {
        setTimeout(() => {
          this.formData = data
          this.comName = 'contradictionsForm'
          this.loading.close()
          this.dialogFormVisible = true
        }, 500)
      }
    }
  },
  computed: {
    totalName: function () {
      let name = ''
      if (this.detailForm.communityName && this.detailForm.buildingName) {
        name = this.detailForm.communityName + '-' + this.detailForm.buildingName + '-' + this.detailForm.name
      } else {
        if (this.detailForm.communityName) {
          name = this.detailForm.communityName + '-' + this.detailForm.name
        } else if (this.detailForm.buildingName) {
          name = this.detailForm.buildingName + '-' + this.detailForm.name
        } else {
          name = this.detailForm.name
        }
      }
      return name
    }
  }
}
</script>
<style scoped>
  .custom-mapinfo-right-card-children li {
    padding: 0px 28px 20px 28px;
  }
  .custom-mapinfo-right-card li {
    display: block;
  }
  .custom-seach-item ul {
    display: block
  }
  .liWrapper {
    display: flex
  }
  .custom-seach-item ul li {
    margin-right: 70px;
  }
  .custom-mapinfo-right-card li span.right-card-item-waterArea{
    background-image: url(~@/assets/application/things/sy_r.png);
  }
  .custom-mapinfo-right-card li span.right-card-item-service{
    background-image: url(~@/assets/application/things/gg_r.png);
  }
  .custom-mapinfo-right-card li span.right-card-item-videoSurveillance{
    background-image: url(~@/assets/application/things/sp_r.png);
  }
  .dropMenu {
    height: 56px;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    background: url(~@/assets/application/arrow-bottom1.png) no-repeat right center
  }
  .dropMenu.active {
    background: url(~@/assets/application/arrow-bottom2.png) no-repeat right center
  }
  .dropUl {
    margin: 5px 0 0;
    transition: all .3s;
    height: 0;
    overflow: hidden;
  }
  .dropUl.active, .dropUls.active {
    height: auto;
    overflow: hidden;
  }
  .dropUl dl dd {
    margin-bottom: 10px;
  }
  .dropUl dl dd:last-child {
    margin-bottom: 0px;
  }
  .dropUls {
    margin:10px 0;
    font-size: 0
  }
  .dropUls dl dd {
    display: inline-block;
    width: 87px;
    margin-left: 10px
  }
  .dropUls span, .dropUl span {
    display: block
  }
  .dropUls .h1, .dropUl .h1 {
    margin-bottom: 5px;
    font-size: 16px;
    color: #fff
  }
  .dropUls .p b, .dropUl .p b {
    font-size: 22px;
    color: #80ddee;
    font-weight: normal
  }
  .dropUls .p, .dropUl .p {
    font-size: 18px;
    color: #11c0ff
  }
  .scardTop {
    width: 100%;
    height: 98px;
    background: url('../../assets/application/search_top_big2.png') no-repeat center center;
  }
  .scardBot {
    width: 100%;
    height: 198px;
    background: url('../../assets/application/search_bot_big2.png') no-repeat center center;
  }
  .custom-seach-item {
    padding: 8px 22px 0;
  }
  .custom-seach-item ul{
    margin-bottom: 20px;
  }
  .custom-seach-item li p {
    padding-right: 34px;
    background: url('../../assets/application/arrow-bottom2.png') no-repeat center right
  }
  .custom-chilren-item {
    font-size: 0;
  }
  .custom-chilren-item dd {
    display: inline-block;
    padding-left:38px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 15px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
  }
  .custom-chilren-item dd.active {
    color: #80ddee
  }
  .custom-chilren-item dd.waterArea:nth-child(1) {
    background: url('../../assets/application/things/hl.png') no-repeat left center
  }
  .custom-chilren-item dd.waterArea:nth-child(2) {
    background: url('../../assets/application/things/sk.png') no-repeat left center
  }
  .custom-chilren-item dd.waterArea:nth-child(3) {
    background: url('../../assets/application/things/rg.png') no-repeat left center
  }
  .custom-chilren-item dd.waterArea:nth-child(4) {
    background: url('../../assets/application/things/st.png') no-repeat left center
  }
</style>
